<template>
  <el-dialog :modelValue="show" title="玩家信息" :close-on-click-modal="false" :close-on-press-escape="false" width="65%"
    top="12vh" @close="handleClose">
    <div class="dialogMaxHeight">
      <div class="border-line" style="padding: 15px 10px;">
        <div class="box-title marginB20">【 <span class="colorText" style="color: red;">
            {{ data.userInfo.account3d }}</span> 】基础信息</div>
        <div class="flexStartDetween">
          <div class="width70 flexWrapDownRight">
            <div v-for="(item, index) in data.fields" :key="index" :class="item.show ? 'showColor' : ''"
              class="itemData flexDetween textCenter">
              <div class="width40">{{ item.label }}</div>
              <div class="width60"
                :class="item.label == '今日输赢' || item.label == '三日输赢' || item.label == '历史输赢' ? colorClass(item.value) : item.label == '当前状态' ? colorClass(data.userInfo.is_online) : ''">
                {{ item.value }}</div>
            </div>
          </div>
          <div class="width40">
            游戏筛选:
            <el-select class="marginB5 marginL5" v-model="data.gameType" placeholder="请选择" filterable
              @change="chooseGame">
              <el-option label="全部" :value="-1" />
              <el-option v-for="(item, index) in indexStore.gameArray" :key="index" :label="item.label"
                :value="item.value" />
            </el-select>
            <div class="contentData">
              <div class="contentItem flexDetween textCenter" style="margin-top: -1px;">
                <div class="width30">游戏名称</div>
                <div class="width25">历史下注</div>
                <div class="width25">历史输赢</div>
                <div class="width20">历史RTP</div>
              </div>
              <div style="height:310px;overflow: auto;">
                <div class="contentItem flexDetween textCenter" :class="data.gameType != -1 ? 'borderBottom' : ''"
                  v-show="item.show" v-for="(item, index) in data.list" :key="index">
                  <div class="width30 text-cut">{{ selectToLabel(indexStore.gameArray, item.game_id) }}</div>
                  <div class="width25 text-cut colorText" :title="BigWan(item.total_bet) as any">{{
                    BigWan(item.total_bet) }} </div>
                  <div class="width25 text-cut" :class="colorClass(item.total_game_income)"
                    :title="BigWan(item.total_game_income) as any">{{ BigWan(item.total_game_income) }} </div>
                  <div class="width20 text-cut" :title="RtpPercent(item.total_win, item.total_bet) as any">{{
                    RtpPercent(item.total_win, item.total_bet) }} </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 玩家资产变动走势 -->
      <div class="border-line" v-if="!indexStore.is_general_agent">
        <el-form :model="data" :inline="true">
          <el-form-item label="日期时间：">
            <el-date-picker v-model="data.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
              end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable />
          </el-form-item>
          <el-form-item label="游戏：">
            <el-select v-model="data.game_id" placeholder="请选择" filterable>
              <el-option label="全部" :value="-1" />
              <el-option v-for="item in indexStore.gameArray" :key="item.value"
                :label="'【' + item.value + '】' + item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :disable="data.loadingChart" icon="Search" type="primary" @click="getGoldList">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="flex" style="margin-top: -15px;margin-bottom: 5px;">
          <el-button :type="data.dayIndex == 1 ? 'success' : ''" :disabled="indexStore.loading"
            @click="changeTime(1)">今日</el-button>
          <el-button :type="data.dayIndex == 2 ? 'success' : ''" :disabled="indexStore.loading"
            @click="changeTime(2)">昨日</el-button>
          <el-button :type="data.dayIndex == 3 ? 'success' : ''" :disabled="indexStore.loading"
            @click="changeTime(3)">上周</el-button>
          <el-button :type="data.dayIndex == 4 ? 'success' : ''" :disabled="indexStore.loading"
            @click="changeTime(4)">本周</el-button>
          <el-button :type="data.dayIndex == 5 ? 'success' : ''" :disabled="indexStore.loading"
            @click="changeTime(5)">本月</el-button>
          <el-button :type="data.dayIndex == 6 ? 'success' : ''" :disabled="indexStore.loading"
            @click="changeTime(6)">上月</el-button>
        </div>
        <div v-loading="data.loadingChart">
          <LargeCharts chartTitle="玩家资产变动走势" :xAxisData="data.onlineXAxis" :seriesData="data.onlineSeries" />
        </div>
      </div>
    </div>

  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from 'vue'
import LargeCharts from '@/components/Echarts/largeChart.vue'
import { getDateDay, getWeek, getMonth, setTimeValue, setTimestampTime } from '@/utils/time'
import { ONLINESTATE } from '@/config/eunm'
import { getPlayerDetails, getPlayerGold } from '@/api/player'
import { throttle, selectToLabel, colorClass } from '@/utils/index'
import { BigWan, BigPercent, RtpPercent } from '@/utils/math'
import { useStore } from '@/stores/index'
const indexStore = useStore()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => props.show,
  async (show) => {
    if (show) {
      data.gameType = -1
      changeTime(4)
      getSearchList()
    }else{
      data.gameType = -1
      data.dayIndex = 1
    }
  },
)

// 数据
const data = reactive({
  userInfo: {} as any,
  date: getWeek(0),
  game_id: -1,
  loadingChart: false,
  onlineXAxis: [] as string[],
  onlineSeries: [] as number[],
  gameType: -1,
  list: [] as any[],
  dayIndex: 1,
  fields: [
    { label: '平台ID', key: 'account3d_id', value: 0, show: 1 },
    { label: '平台昵称', key: 'account3d', value: 0, },
    { label: '当前余额', key: 'amount', value: 0, show: 1 },
    { label: '创建时间', key: 'created_at_stamp', value: 0 },
    { label: '最后登录时间', key: 'last_login_stamp', value: 0, show: 1 },
    { label: '当前状态', key: 'is_online', value: 0 },
    { label: '三日登录次数', key: 'three_login_num', value: 0, show: 1 },
    { label: '总登录次数', key: 'total_login_num', value: 0 },
    { label: '今日局数', key: 'today_bet_count', value: 0, show: 1 },
    { label: '历史局数', key: 'total_bet_count', value: 0 },
    { label: '注册IP地址', key: 'user_first_login_ip', value: '', show: 1 },
    { label: '今日流水倍数', key: 'today_bet_multiple', value: 0, show: 1 },
    { label: '三日流水倍数', key: 'three_day_bet_multiple', value: 0 },
    { label: '当天押注', key: 'today_bet', value: 0, show: 1 },
    { label: '三日押注', key: 'three_day_bet', value: 0 },
    { label: '总押注', key: 'total_bet', value: 0, show: 1 },
    { label: '今日输赢', key: 'today_game_income', value: 0 },
    { label: '三日输赢', key: 'three_day_game_income', value: 0, show: 1 },
    { label: '历史输赢', key: 'total_game_income', value: 0 },
    { label: '三日胜率', key: 'three_percent', value: 0, show: 1 },
    { label: '历史RTP', key: 'history_percent', value: 0 },
    { label: '留存天数', key: 'retention_day', value: 0, show: 1 },
  ],
})

const getSearchList = async () => {
  data.onlineXAxis = []
  data.onlineSeries = []
  let details = await getPlayerDetails({ id: props.checkedItem.uid }), dataObj = {} as any, keyData = [] as any;
  Object.assign(dataObj, details.data.user_info, details.data)
  Object.assign(data.userInfo, details.data.user_info)
  console.log('玩家详情', dataObj);
  // 列表数据
  keyData = Object.keys(dataObj)
  data.fields.forEach((item: any) => {
    keyData?.forEach((key: string) => {
      if (key == item.key) {
        item.value = dataObj[key]
        if (item.key == 'created_at_stamp') {
          item.value = setTimestampTime(dataObj['created_at_stamp'])
        }
        if (item.key == 'last_login_stamp') {
          item.value = setTimestampTime(dataObj['last_login_stamp'])
        }
        if (item.key == 'is_online') {
          item.value = selectToLabel(ONLINESTATE, dataObj['is_online'])
        }
        if (item.key == 'user_first_login_ip') {
          item.value = dataObj['user_first_login_ip'] + '(' + dataObj['ip_country'] + ')'
        }
        if (item.key == 'amount' || item.key == 'today_bet' || item.key == 'three_day_bet' || item.key == 'total_bet' ||
          item.key == 'today_game_income' || item.key == 'three_day_game_income' || item.key == 'total_game_income') {
          item.value = BigWan(dataObj[key])
        }
      }
      // 胜率
      if (item.key == 'three_percent') {
        item.value = BigPercent(dataObj['three_day_win_bet_count'], dataObj['three_day_bet_count'])
      }
      if (item.key == 'history_percent') {
        item.value = BigPercent(dataObj['total_win_bet_count'], dataObj['total_bet_count'])
      }
    })
  })

  // 按钮数据
  dataObj.game_data?.forEach((item: any) => {
    item.show = true
  })
  data.list = dataObj.game_data
}
// 玩家资产走势
const getGoldList = async () => {
  data.onlineXAxis = []
  data.onlineSeries = []
  data.loadingChart = true
  let gold = await getPlayerGold(setTimeValue({ id: props.checkedItem.uid, date: data.date, game_id: data.game_id }));
  gold.data?.forEach((item: { save_time_stamp: number, after_settlement_money: number }) => {
    data.onlineXAxis.push(setTimestampTime(item.save_time_stamp))
    data.onlineSeries.push(BigWan(item.after_settlement_money))
  })
  data.loadingChart = false
}

// 设置快捷查询时间
const changeTime = throttle((type: number) => {
  if (data.dayIndex == type) return false
  data.dayIndex = type
  switch (type) {
    case 1:
      data.date = [getDateDay(0), getDateDay(0)]
      break;
    case 2:
      data.date = [getDateDay(-1), getDateDay(-1)]
      break;
    case 3:
      data.date = getWeek(-1)
      break;
    case 4:
      data.date = getWeek(0)
      break;
    case 5:
      data.date = getMonth(0)
      break;
    case 6:
      data.date = getMonth(-1)
      break;
  }
  getGoldList()
}, 2000)

const chooseGame = async (val: any) => {
  if (val != -1) {
    data.list.forEach((item: any) => {
      if (item.game_id != val) {
        item.show = false
      } else {
        item.show = true
      }
    })
  } else {
    data.list.forEach((item: any) => {
      item.show = true
    })
  }
}

const emit = defineEmits(['onHideDetails'])
// 取消
const handleClose = async () => {
  emit('onHideDetails', false)
}
</script>
<style lang="scss" scoped>
.showColor {
  background-color: var(--el-menu-hover-bg-color);
}

.flexStartDetween {
  padding: 10px;
  font-size: 14px;

  .width70 {
    height: 390px;
  }

  background-color: var(--background);

  .itemData {
    height: 35px;
    line-height: 35px;
    margin-right: 5px;

    .width40 {
      font-weight: 600;
      border-right: 1px solid #fff;
    }
  }

  .titleData {
    .width30 {
      width: 33%;
      height: 35px;
      line-height: 35px;
      cursor: pointer;
    }

    .chooseTitle {
      color: green;
    }
  }

  .contentData {
    border: 1px solid #666666;

    .contentItem {
      min-height: 25px;
      margin-left: -1px;
      margin-right: -1px;
      margin-bottom: -1px;
      border: 1px solid #666666;
    }

    .borderBottom {
      border-bottom: 1px solid #666666;
    }

    .width25 {
      width: 25%;
      border-left: 1px solid #666666;
      margin-left: -1px;
    }

    .width20 {
      width: 18%;
      font-size: 15px;
      border-left: 1px solid #666666;
    }
  }
}
</style>
